<template>
	<div class="gk-layout-container">
		<div class="gk-layout-header">
			<!--工具栏-->
			<div class="toolbar" style="float:left;">
				<el-form :inline="true" :model="filters" :size="global.gSize">
					<el-form-item>
						<el-select v-model="filters.itemId" style="width: 175px;" clearable  filterable 	placeholder="物料">
							<el-option v-for="i in itemName" :key="i.id" :label="i.name"
								:value="i.id">
							</el-option>
						</el-select>
					</el-form-item>
						<el-form-item>
						<el-select v-model="filters.storeStatus" style="width: 175px;" clearable  filterable 	placeholder="物料">
							<el-option v-for="i in dicts.storeStatus" :key="i.value" :label="i.label"
								:value="i.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item> <el-input v-model="filters.bName " placeholder="设备名称" /> </el-form-item>
					<el-form-item> <el-input v-model="filters.barCode " placeholder="设备编码" /> </el-form-item>
					<el-form-item>
						<kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)"  perms="core:stockDetail:show" />
					    <kt-button icon="fa fa-plus" :label="$t('action.add')" type="primary" @click="handleAdd" perms="core:stockDetail:show" />
					</el-form-item>
				</el-form>
			</div>
			<div class="toolbar" style="float:right;padding-top:0px;padding-right:0px;">
				<el-form :inline="true" :size="global.gSize">
					<el-form-item>
						<el-button-group>
							<el-tooltip content="打印" placement="top">
								<el-button icon="fa fa-print" @click="handlePreview" />
							</el-tooltip>

							<el-tooltip content="导出Excel" placement="top">
								<el-button icon="fa fa-file-excel-o" @click="exportExcel" />
							</el-tooltip>
						</el-button-group>
					</el-form-item>

				</el-form>

			</div>
		</div>
		<!--表格内容栏-->

		<div class="gk-layout-main">
			<my-table :data="pageResult.content"  :loading="loading"  >
				<el-table-column :label="$t('action.desc')" width="50" header-align="center" align="center">
					<template slot-scope="scope"> {{scope.$index+1}} </template>
				</el-table-column>

				<column prop="itemId" label="物料名称"     :formatter="itemFilter"/> 
				<column prop="bName" label="设备名称"  />
				<column prop="barCode" label="设备编码"/>
		        <column prop="storeStatus" label="状态"    :formatter= "selectionFormat1" />

				<el-table-column header-align="center" align="center" width="300" :label="$t('action.operation')">
					<template slot-scope="scope">
						<kt-button icon="fa fa-edit"  type="text"  label="查看" perms="core:stockDetail:show"  @click="handleShow(scope.$index, scope.row)" />
						<kt-button icon="fa fa-edit"  type="text" label="出库" v-if="scope.row.storeStatus==9" perms="core:stockDetail:Out"   @click="handleGenerate(scope.$index, scope.row)" />
						<kt-button icon="fa fa-edit"  type="text"  label="打印条码" v-if="scope.row.storeStatus==2"  perms="core:stockDetail:show"  @click="print(scope.$index, scope.row)" />
					</template>
				</el-table-column>
			</my-table>
		</div>
		<!--分页栏-->
		<div class="toolbar gk-layout-footer" style="padding:10px;">
			<el-pagination layout="total, prev, pager, next, jumper" @current-change="findPage"
				:current-page="pageRequest.pageNum" :page-size="pageRequest.pageSize" :total="pageResult.totalSize"
				style="float:right;">
			</el-pagination>
		</div>


<el-dialog title="资产明细"   width="70%"  :visible.sync="dialogVisible"  :close-on-click-modal="true">
      <el-form :model="dataForm"  label-width="120px" ref="dataForm"  :rules="dataFormRules"  :size="global.gSize"   label-position="right">

	        <el-row>
			   <el-col :span="12">
					<el-form-item label="物料名称"  prop="itemId"  > 
						<el-select v-model="dataForm.itemId"    style="width:100%"  filterable>
							<el-option v-for="i in itemName" :key="i.id" :label="i.name" :value="i.id"></el-option>
						</el-select>
					</el-form-item> 
				</el-col>
			   <el-col :span="12">
					<el-form-item label="设备名称"  prop="bName">
						<el-input type="text" v-model="dataForm.bName" ></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		   <el-row>
		      <el-col :span="12">
					<el-form-item label="设备编码"  prop="barCode">
					<el-input type="text" v-model="dataForm.barCode"   ></el-input>
					</el-form-item>
				</el-col>
			   <el-col :span="12">
					<el-form-item label="设备IP"  prop="bIp">
					<el-input type="text" v-model="dataForm.bIp"   ></el-input>
					</el-form-item>
		 	   </el-col>
			</el-row>
		   <el-row>
		        <el-col :span="12">
					<el-form-item label="使用寿命"  prop="bLifeLimit">
					<el-input type="text" v-model="dataForm.bLifeLimit"   ></el-input>
					</el-form-item>
				</el-col>
			   <el-col :span="12">
					<el-form-item label="所属其他系统 "  prop="outSystem">
					<el-input type="text" v-model="dataForm.BOutSystem"   ></el-input>
					</el-form-item>	   
				</el-col>
			</el-row>
		   <el-row>  
				<el-col :span="12">
					<el-form-item label="其他系统编码"  prop="outSystemCode">
					<el-input type="text" v-model="dataForm.bOutSystemCode"   ></el-input>
					</el-form-item>
				</el-col>
			   <el-col :span="12">
					<el-form-item label="品牌"  prop="brand">
					<el-input type="text" v-model="dataForm.bBrand"   ></el-input>
					</el-form-item>	   
					
				</el-col>
		 	</el-row>
		   <el-row>   
				<el-col :span="12">
					<el-form-item label="设备型号"  prop="modelNum">
						<el-input type="text" v-model="dataForm.bModelNum"   ></el-input>
					</el-form-item>
				</el-col>
			   <el-col :span="12">
					<el-form-item label="生产日期"  prop="bProduceDate">


			<el-date-picker
                      v-model="dataForm.bProduceDate"
                      clearable
                      :size="global.gSize"
                      style="width:100%"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择生产时间"
                    ></el-date-picker>

					
					</el-form-item>	  
				 </el-col>
		 	</el-row>
		   <el-row>  
				<el-col :span="12">
					<el-form-item label="流水号"  prop="serialNumber">
					<el-input type="text" v-model="dataForm.bSerialNumber"   ></el-input>
					</el-form-item>
				</el-col>
			   <el-col :span="12">
					<el-form-item label="序列号"  prop="suquenceNum">
					<el-input type="text" v-model="dataForm.bSquenceNum"   >
					</el-input>
					</el-form-item>
		   	   </el-col>
		   	</el-row>
      </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button :size="global.gSize" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="global.gSize" type="primary"  v-if=operation   @click.native="submitForm">{{$t('action.submit')}}</el-button>
      </div>
			
    </el-dialog>
</div>

</template>

<script> 
	import KtButton from "@/views/Core/KtButton"
	import MyTable from "@/views/Core/MyTable"
	import Column from "@/views/Core/Column"
	import { format } from "@/utils/datetime"
	import { myPrint,addHtmlTd } from "@/utils/LodopFuncs"
  import { myXlsExport } from "@/excel/myXls"
  import {getItemName} from "@/utils/myUtil"
	import KtDeleteButton from "@/views/Core/KtDeleteButton"
	export default {
		components: {
			KtButton,
			Column,
			MyTable
		},
		data() {
			return {
				size:"mini",
				filters: {
					batchNo: '',
				
				},
				operation:true,
				loading: false,
				dicts: this.$store.state.dict.dicts,
				dialogVisible:false,
				itemName:this.$store.state.dict.item,
				pageRequest: { pageNum: 1, pageSize: 7 },
				pageResult: {}, 
		   
				dataForm: {
					id: 0
				} 

			}
		},
		computed: {
			dataFormRules() {
				const dataFormRules = {
				itemId: [{ required: true, message: "请选择物料", trigger: 'blur' }],
				bName: [{ required: true, message: "请输入设备名称", trigger: 'blur' }],
				barCode: [{ required: true, message: "请输入设备编码", trigger: 'blur' }]
				};
				return dataFormRules;
			}
		},
		methods: {
			 
			// 获取分页数据
			findPage: function (data) {
				data = data || 1
				this.filters.pageNum = data
				this.pageRequest.pageNum = data

				this.filters.pageSize = this.pageRequest.pageSize
				this.$api.coreStock.findDetailPage(this.filters).then((res) => {
					this.pageResult = res.data
				}).then(data != null ? data.callback : '')
			},


			 submitForm: function () {
				this.$refs.dataForm.validate((valid) => {
				if (valid) {
					this.$confirm(this.getKey('action.isConfirm'), this.getKey('action.tips'), {}).then(() => {
					this.editLoading = true
					let params = Object.assign({}, this.dataForm)
					this.$api.coreStock.saveStockDetail(params).then((res) => {
						this.editLoading = false
						if (res.code == 200) {
							this.$message({ message: this.getKey('action.operateSucess'), type: 'success' })
							this.dialogVisible = false
							this.$refs['dataForm'].resetFields()
						} else {
							this.$message({ message: this.getKey('action.operateFail') + res.msg, type: 'error' })
						}
						this.findPage(null)
					})
					})
				}
				})
			},
			  handleAdd: function () {

				this.dialogVisible = true
				this.operation = true
				this.dataForm = {}
			},
			  getKey: function (arg) {
				return this.$t(arg)
			},
			//导出的方法
			exportExcel() {
				this.filters.pageSize = -1
			 
					this.$api.coreStock.printDetail(this.filters).then((res) => {
						const tHeader = ['单号', '状态', '站台号'];
						const filterVal = ['itemId', 'id', 'stockStatus', 'rLocId'];
						const list = res.data.info;  //把data里的tableData存到list
						for(var i=0;i<list.length;i++){
							list[i].itemId=	this.getItemName(list[i].itemId);
						}
						myXlsExport(tHeader, filterVal ,list, '库位库存导出');
					})
			 
			},
		  	selectionFormat1: function (row, column, cellValue, index) {
				let propt = column.property;
				let val = row[propt];
				let dict = this.dicts["storeStatus"];
				for (let i = 0; i < dict.length; i++) {
					if (dict[i].value == val) {
						return dict[i].label;
					}
				}
				return row[propt]
      		},
			itemFilter: function (row, column, cellValue, index) {
		 
					return getItemName(cellValue,this.itemName)
			},
			 
			getItemName:function (id){
		       var items=this.itemName;
				for(var j=0;j<items.length;j++){
					if(items[j].id==id){
						return items[j].name;
					}
				}
				return id;
			},
		
			// 显示打印界面
			handlePreview: function () {
			
				this.$api.coreStock.printDetail(this.filters).then((res) => { 
						var strList = res.data.info;
						var html = res.data.html;
						var detailHtml = ""; 
						for (let index = 0; index < strList.length; index++) {
							var detail=strList[index];
							detailHtml += "<tr>";
							detailHtml +=addHtmlTd(this.getItemName(detail.itemId))  ;
							detailHtml +=addHtmlTd (detail.id  )  ;
							detailHtml +=addHtmlTd(detail.stockStatus ) ;
							detailHtml +=addHtmlTd(detail.rLocId  )  ;
							detailHtml += "</tr>";
						}
						html = html.replace("{Content}", detailHtml);

						myPrint("库房资产",html)
						 
				})

			},

		 
			// 生成任务
			handleGenerate: function (index, row) {

				this.$confirm('确定出库吗？', '提示', {}).then(() => {
					var data={id:row.stockId}
					this.$api.coreStock.DirectOutTask(data).then((res) => {
						if (res.code == 200) {
							this.$message({ message: '操作成功', type: 'success' })
							this.findPage(null)   //这里有bug
						} else {
							this.$message({ message: res.msg, type: 'error' })
						}
					})
				})
			},
			print: function (params, row) {
		
				this.$api.print.print2d(row).then((res) => {
						this.$message({ message: "操作成功"+ res.msg, type: 'success' })
				}).catch(e=>{
					this.$message({ message:e.message, type: 'error' });
				})
			},
			
			// 显示编辑界面
			handleShow: function (params, row) {
				this.dialogVisible = true
				this.operation=false;
				this.dataForm = Object.assign({}, row)
			},
			// 时间格式化
			dateFormat: function (row, column, cellValue, index) {
				return format(row[column.property])
			},
			OverdateFormat: function (row, column, cellValue, index) {
				if (row.status == 3) {
					return format(row[column.property]);
				} else {
					return "";
				}

			} 
		},
		
		mounted() {
			
			this.size=this.global.gSize;
			this.findPage();
		}
	}
</script>

<style scoped>

</style>